<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01-切换图片练习</title>
    <script>

        /*使图片自动切换*/

        window.onload = function () {

            var img1 = document.getElementById("img1");

            var imgArr = ["./images/京东轮播图1.jpg", "./images/京东轮播图2.jpg", "./images/京东轮播图3.jpg", "./images/京东轮播图4.jpg", "./images/京东轮播图5.jpg", "./images/京东轮播图6.jpg", "./images/京东轮播图7.jpg", "./images/京东轮播图8.jpg"]

            var index = 0;

            var int1;

            var btn1 = document.getElementById("btn1");
            btn1.onclick = function () {

                //每点击一次按钮就会开启一个定时器，所以在开启一个定时器之前，需要关闭上一个定时器
                clearInterval(int1);

                //开启定时器
                int1 = setInterval(function () {

                    index++;

                    if (index >= imgArr.length) {
                        index = 0;
                    }

                    img1.src = imgArr[index];

                }, 1000);

            }

            var btn2 = document.getElementById("btn2");
            btn2.onclick = function () {
                clearInterval(int1);
            }



        }


    </script>
</head>

<body>
    <img id="img1" src="./images/京东轮播图1.jpg" alt="" style="width: 500px;">
    <button id="btn1">开始</button>
    <button id="btn2">结束</button>

</body>

</html>